<template>
  <div class="library">
    <!-- <div class="buttons">
      <p-button type="primary">primary</p-button>
      <p-button type="success">success</p-button>
      <p-button type="error">error</p-button>
      <p-button type="warning">warning</p-button>
      <p-button type="info">info</p-button>
      <p-button>button</p-button>
      <p-button type="primary" disabled @click="handleClick">primary</p-button>
    </div>
    <div class="radios">
      <p-radio-group v-model="radio" @change="changeRadio">
        <p-radio :value="true">是</p-radio>
        <p-radio :value="false">否</p-radio>
      </p-radio-group>
      <p-radio-group v-model="radio" disabled>
        <p-radio :value="true">YES</p-radio>
        <p-radio :value="false">NO</p-radio>
        <p-radio value="or"></p-radio>
      </p-radio-group>
    </div> -->
    <div class="message">
      <p-button type="success" @click="openMessageSuccess"> 成功提示 </p-button>
      <p-button type="error" @click="openMessageError"> 失败提示 </p-button>
      <p-button @click="openMessage1"> 普通提示不传参 </p-button>
      <p-button @click="openMessage2"> 普通提示传参 </p-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import pMessage from "@/components/message/index.js";
const radio = ref(true);
const handleClick = () => {
  console.log("click");
};

const changeRadio = (val) => {
  console.log("changeRadio", val);
};

const openMessage = (type) => {
  pMessage("错误！");
  console.log("pMessage", pMessage.error);
};
const openMessageSuccess = () => {
  pMessage.success("成功！");
};
const openMessageError = () => {
  pMessage.error("失败！");
};
const openMessage1 = () => {
  pMessage("普通提示不传参");
};
const openMessage2 = () => {
  pMessage({
    content: "普通提示传参",
    duration: 300,
    type: "primary",
  });
};
</script>
<style scoped>
.library {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.message {
  margin-top: 100px;
  display: flex;
  gap: 20px;
}
</style>
